<template>
    <div class="nav_bottom" v-if="nowPage">
      <a href="javascript:;" :class="{'active':nowPage.name=='Home'}" @click="goHome">首页</a>
      <a href="javascript:;" :class="{'active':nowPage.name=='Bookshelf'}" @click="bookshelf">书架</a>
      <a href="javascript:;" :class="{'active':nowPage.name=='Community'}" @click="community">社区</a>
      <a href="javascript:;" :class="{'active':nowPage.name=='usercenter'||nowPage.name=='userinfo'||nowPage.name=='authorCenter'}" @click="gouserInfo">我的</a>
    </div>
</template>

<script>
import { mapState } from 'vuex'
  export default {
    data () {
      return {
        msg: '13213',
      }
    },
    computed: {
      ...mapState({
         nowPage: state => state.nowpage.nowPage,
      })
    },    
    methods:{
      goHome(){
        this.$router.push({name:'Home'});
      },
      bookshelf(){
        this.$router.push({name:'Bookshelf'});
      },
      community(){
        this.$router.push({name:'Community'});
      },
      gouserInfo(){
        this.$router.push({name:'usercenter'});
      }
    }
  }
</script>


<style>
.nav_bottom{
  position: fixed;
  z-index: 99;
  bottom:0;
  background: #fff;
 width: 320px;
border-top: 1px solid #999999;

}
.nav_bottom a{
  display: block;
  width: 25%;
  float: left;
  padding-top:30px;
  padding-bottom: 5px;
  text-align: center;
  font-size: 14px;

}
.nav_bottom a.active{
  border-top: 2px solid #FF6600;
  color:#f60;
}
.nav_bottom a:nth-child(1){
  background: url(../../../static/img/bookso.png) center 7px no-repeat;
  background-size: 24px auto;
}
.nav_bottom a:nth-child(2){
  background: url(../../../static/img/booklib.png) center 7px no-repeat;
  background-size: 20px auto;
}
.nav_bottom a:nth-child(2).active{
  background: url(../../../static/img/booklib_a.png) center 7px no-repeat;
  background-size: 20px auto;
}
.nav_bottom a:nth-child(3){
  background: url(../../../static/img/bbs.png) center 7px no-repeat;
  background-size: 24px auto;
}
.nav_bottom a:nth-child(4){
  background: url(../../../static/img/me.png) center 7px no-repeat;
  background-size: 18px auto;
}
.nav_bottom a:nth-child(4).active{
  background: url(../../../static/img/me_a.png) center 7px no-repeat;
  background-size: 18px auto;
}
</style>
